<template>
  <!-- 绑定已有账户 -->
  <div v-if="getShow" class="bind-user-container">
    <div class="bind-user-content">
      <el-form
        ref="formLogin"
        :model="loginForm"
        :rules="LoginRules"
        class="bind-form"
        label-width="80px"
      >
        <!-- 标题区域 -->
        <div class="form-header">
          <LoginFormTitle class="form-title" />
          <div class="form-subtitle">
            <p>绑定已有账户</p>
            <span>使用现有账户信息进行绑定登录</span>
          </div>
        </div>

        <!-- 表单区域 -->
        <div class="form-body">
          <el-form-item label="企业名称" prop="tenantName" class="form-item">
            <el-input
              v-model.trim="loginForm.tenantName"
              :placeholder="t('login.tenantNamePlaceholder')"
              :prefix-icon="iconHouse"
              class="form-input"
              size="large"
            />
          </el-form-item>

          <el-form-item label="用户名" prop="username" class="form-item">
            <el-input
              v-model.trim="loginForm.username"
              :placeholder="t('login.usernamePlaceholder')"
              :prefix-icon="iconAvatar"
              class="form-input"
              size="large"
            />
          </el-form-item>

          <el-form-item label="密码" prop="password" class="form-item">
            <el-input
              v-model.trim="loginForm.password"
              :placeholder="t('login.passwordPlaceholder')"
              :prefix-icon="iconLock"
              show-password
              :type="passType"
              autocomplete="new-password"
              class="form-input"
              size="large"
            />
          </el-form-item>
        </div>

        <!-- 按钮区域 -->
        <div class="form-footer">
          <XButton :title="t('login.bindUser')" class="bind-button" @click="bindNowUser" />
        </div>
        <div class="form-footer">
          <XButton
            :title="t('login.btnMobile')"
            class="bgc-white"
            @click="setLoginState(LoginStateEnum.MOBILE)"
          />
        </div>
        <div class="form-footer">
          <XButton
            :loading="loginLoading"
            :title="t('login.backLogin')"
            class="bgc-white"
            @click="handleBackLogin()"
          />
        </div>
      </el-form>
    </div>
  </div>
  <Verify
    ref="verify"
    :captchaType="captchaType"
    :imgSize="{ width: '300px', height: '150px' }"
    mode="pop"
    @success="handleLogin"
  />
</template>

<script setup>
import { LoginStateEnum, useFormValid, useLoginState } from './useLogin'
const { t } = useI18n()
const { setLoginState, getLoginState, handleBackLogin } = useLoginState()
import { useIcon } from '@/hooks/web/useIcon'
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.BIND_NOW_USER)
import { weComQuickLogin } from '@/api/wecom/user/index'
import * as authUtil from '@/utils/auth'
import { usePermissionStore } from '@/store/modules/permission'
import * as LoginApi from '@/api/login'
import { cloneDeep } from 'lodash-es'

const LoginRules = {
  tenantName: [required],
  username: [required],
  password: [required]
}
const captchaType = ref('blockPuzzle') // blockPuzzle 滑块 clickWord 点击文字
const permissionStore = usePermissionStore()
const formLogin = ref()
const { validForm } = useFormValid(formLogin)
const iconHouse = useIcon({ icon: 'ep:house' })
const iconAvatar = useIcon({ icon: 'ep:avatar' })
const iconLock = useIcon({ icon: 'ep:lock' })
const loginForm = reactive({
  uuid: '',
  tenantName: '',
  mobileNumber: '',
  captchaVerification: '',
  code: ''
})
const props = defineProps({
  agree: {
    type: Boolean,
    default: () => true
  }
})
const redirect = ref('')
const verify = ref()

const getUserTenantId = async () => {
  const res = await LoginApi.getTenantIdByName(loginForm.tenantName)
  authUtil.setTenantId(res ? res.id : null)
  authUtil.setTenantSign(res ? res.sign : null)
}
const bindNowUser = async () => {
  if (!props.agree) {
    ElMessage.error('请先同意用户使用协议和个人信息保护政策')
    return
  }
  const data = await validForm()
  if (!data) {
    return
  }
  verify.value.show()
}
const handleLogin = async (params) => {
  await getUserTenantId()
  loginForm.captchaVerification = params.captchaVerification
  const res2 = await LoginApi.login(loginForm)
  if (res2) {
    try {
      const obj = cloneDeep(preData.value)
      obj.sysUserId = res2.userId
      // 在快捷登录
      const data = await weComQuickLogin(obj)
      if (res2) {
        authUtil.setTenantId(res2.tenantId)
        authUtil.setTenantSign(res2.tenantSign)
        authUtil.setToken(res2)
        push({ path: '/' })
      }
    } catch {}
  }
}
</script>

<style lang="scss" scoped>
.bind-user-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.bind-user-content {
  width: 100%;
  max-width: 420px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  animation: slideInUp 0.6s ease-out;
}

.bind-form {
  padding: 0;
}

// 表单头部
.form-header {
  background: #2091f6;

  padding: 40px 30px 30px;
  text-align: center;
  color: white;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
  }
}

.form-title {
  :deep(.login-title) {
    color: white !important;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 8px;
  }
}

.form-subtitle {
  p {
    font-size: 20px;
    font-weight: 500;
    margin: 0 0 8px 0;
    color: rgba(255, 255, 255, 0.95);
  }

  span {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
  }
}

// 表单主体
.form-body {
  padding: 40px 30px 20px;
}

.form-item {
  margin-bottom: 24px;

  :deep(.el-form-item__label) {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 8px;
    line-height: 1.5;
  }

  :deep(.el-form-item__content) {
    line-height: normal;
  }
}

.form-input {
  :deep(.el-input__wrapper) {
    border-radius: 12px;
    border: 2px solid #e5e7eb;
    box-shadow: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: #f9fafb;

    &:hover {
      border-color: #d1d5db;
      background: #ffffff;
    }

    &.is-focus {
      border-color: #667eea;
      background: #ffffff;
      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }
  }

  :deep(.el-input__inner) {
    font-size: 15px;
    color: #374151;
    padding: 12px 16px;
    height: auto;

    &::placeholder {
      color: #9ca3af;
      font-size: 14px;
    }
  }

  :deep(.el-input__prefix) {
    left: 16px;

    .el-input__prefix-inner {
      color: #6b7280;
      font-size: 16px;
    }
  }

  :deep(.el-input__suffix) {
    right: 16px;

    .el-input__suffix-inner {
      color: #6b7280;
    }
  }
}

// 表单底部
.form-footer {
  padding: 10px 30px 10px;
}

.bgc-white {
  width: 100%;
  height: 50px;
  background: #ffffff;
  border-radius: 12px;
  color: #606266;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
  }

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);

    &::before {
      left: 100%;
    }
  }

  &:active {
    transform: translateY(0);
  }

  :deep(.el-button) {
    background: transparent !important;
    border: none !important;
    color: white !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    width: 100% !important;
    height: 100% !important;
  }
}
.bind-button {
  width: 100%;
  height: 50px;
  background: #2091f6;
  border: none;
  border-radius: 12px;
  color: white;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
  }

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);

    &::before {
      left: 100%;
    }
  }

  &:active {
    transform: translateY(0);
  }

  :deep(.el-button) {
    background: transparent !important;
    border: none !important;
    color: white !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    width: 100% !important;
    height: 100% !important;
  }
}

// 动画效果
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 响应式设计
@media (max-width: 768px) {
  .bind-user-container {
    padding: 15px;
    align-items: flex-start;
    padding-top: 60px;
  }

  .bind-user-content {
    max-width: 100%;
    border-radius: 16px;
  }

  .form-header {
    padding: 30px 20px 25px;
  }

  .form-title {
    :deep(.login-title) {
      font-size: 24px;
    }
  }

  .form-subtitle {
    p {
      font-size: 18px;
    }

    span {
      font-size: 13px;
    }
  }

  .form-body {
    padding: 30px 20px 15px;
  }

  .form-footer {
    padding: 10px 20px 10px;
  }

  .bind-button {
    height: 48px;
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .bind-user-container {
    padding: 10px;
    padding-top: 40px;
  }

  .bind-user-content {
    border-radius: 12px;
  }

  .form-header {
    padding: 25px 15px 20px;
  }

  .form-title {
    :deep(.login-title) {
      font-size: 22px;
    }
  }

  .form-subtitle {
    p {
      font-size: 16px;
    }
  }

  .form-body {
    padding: 25px 15px 10px;
  }

  .form-item {
    margin-bottom: 20px;
  }

  .form-footer {
    padding: 10px 15px 10px;
  }
}

// 深色模式支持
@media (prefers-color-scheme: dark) {
  .bind-user-content {
    background: rgba(31, 41, 55, 0.95);
  }

  .form-item {
    :deep(.el-form-item__label) {
      color: #f3f4f6;
    }
  }

  .form-input {
    :deep(.el-input__wrapper) {
      background: #374151;
      border-color: #4b5563;

      &:hover {
        border-color: #6b7280;
        background: #4b5563;
      }

      &.is-focus {
        background: #4b5563;
      }
    }

    :deep(.el-input__inner) {
      color: #f3f4f6;

      &::placeholder {
        color: #9ca3af;
      }
    }
  }
}

// 高对比度模式
@media (prefers-contrast: high) {
  .form-input {
    :deep(.el-input__wrapper) {
      border-width: 3px;

      &.is-focus {
        border-color: #1f2937;
        box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.2);
      }
    }
  }

  .bind-button {
    background: #1f2937;

    &:hover {
      background: #111827;
    }
  }
}

// 减少动画模式
@media (prefers-reduced-motion: reduce) {
  .bind-user-content {
    animation: none;
  }

  .form-input {
    :deep(.el-input__wrapper) {
      transition: none;
    }
  }

  .bind-button {
    transition: none;

    &::before {
      transition: none;
    }

    &:hover {
      transform: none;
    }
  }
}
</style>
